<template>
  <a-drawer
    :visible="visible"
    :width="320"
    :loading="loading"
    unmount-on-close
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 详细信息 </template>
    <div>
      <a-row style="font-size: 1.5em"> 发件人 </a-row>
      <div class="info-title">
        <a-row>
          <a-col :span="6">
            <a-avatar
              :size="35"
              class="info-headPicture"
              :style="{ backgroundColor: '#7BC616' }"
              >{{ detailsInfoRow?.createBy[0] }}</a-avatar
            >
          </a-col>
          <a-col :span="10" class="info-creatby">
            {{ detailsInfoRow?.createBy }}
          </a-col>
          <a-col :span="8" class="info-create-date">
            {{ detailsInfoRow?.createDate.slice(0, 10) }}
          </a-col>
        </a-row>
        <a-card
          :bordered="false"
          class="card-list"
          style="background-color: #f7f8fa"
        >
          <div class="title-file"> <span class="title-icon"></span> 文件 </div>

          <a-list
            size="small"
            :bordered="false"
            :split="false"
            :data="detailsInfoRow?.issueFileList"
            :scrollbar="true"
            :max-height="130"
          >
            <template #item="{ item }">
              <a-list-item
                >{{ item.name }}
                <template #actions>
                  <icon-download @click="issueFileDownload(item)" /> </template
              ></a-list-item>
            </template>
          </a-list>
        </a-card>
        <a-card
          :bordered="false"
          class="card-list"
          style="background-color: #f7f8fa"
        >
          <a-typography>
            <a-typography-title :heading="6" class="title-message"
              ><span class="title-icon"></span>消息</a-typography-title
            >
            <a-typography-paragraph class="message-info">
              <a-scrollbar>
                {{ detailsInfoRow?.message }}
              </a-scrollbar>
            </a-typography-paragraph>
          </a-typography>
        </a-card>
      </div>
    </div>
    <a-divider />
    <div>
      <a-row style="font-size: 1.5em"> 收件人 </a-row>
      <div class="info-title">
        <a-row>
          <a-col :span="8">
            <a-avatar-group :max-count="1">
              <a-avatar
                v-for="issueRecipient in issueRecipientList"
                :key="issueRecipient.id"
                :style="{ backgroundColor: '#7BC616' }"
                >{{ issueRecipient.userName[0] }}</a-avatar
              >
            </a-avatar-group>
          </a-col>
          <a-col :span="16">
            <a-popover position="left">
              <span class="overflow-e">
                {{
                  issueRecipientList!
                    .map((item: any) => item.userName)
                    .join('、')
                }}
              </span>
              <template #content>
                {{
                  issueRecipientList!
                    .map((item: any) => item.userName)
                    .join('、')
                }}
              </template>
            </a-popover>
          </a-col>
        </a-row>
        <a-divider />
        <div>
          <a-space>
            <span style="width: 45px">状态：</span>
            <a-select v-model="status" placeholder="请选择" value-key="key">
              <a-option
                v-for="item of optionData"
                :key="item.key"
                :value="item"
                :label="item.label"
              /> </a-select
          ></a-space>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { ref, PropType, computed } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    issuesData,
    issueFileDownload,
    updateStatus,
    issuesStatus,
  } from '../api';

  const { loading, setLoading } = useLoading(true);
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    detailsInfoRow: {
      type: Object as PropType<issuesData>,
    },
  });

  const optionData = [
    {
      value: 0,
      label: '未解决',
      key: '0',
    },
    {
      value: 2,
      label: '处理中',
      key: '2',
    },
    {
      value: 1,
      label: '已完成',
      key: '1',
    },
  ];

  const status = ref();
  const issueRecipientList = computed(
    () => props.detailsInfoRow!.issueRecipientList
  );

  const emit = defineEmits(['update:visible']);
  const handleOk = async (
    params: issuesStatus = {
      issueId: props.detailsInfoRow!.id,
      status: status.value.value,
    }
  ) => {
    setLoading(true);
    try {
      console.log(params);

      const res = await updateStatus(params);
      console.log(res);
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
      emit('update:visible', false);
    }
  };
  const handleCancel = () => {
    emit('update:visible', false);
  };
</script>

<style lang="less" scoped>
  .info-title {
    margin: 20px;
    .info-create-date {
      position: relative;
      top: 10px;
    }
    .info-creatby {
      position: relative;
      top: 10px;
      left: -10px;
    }
  }
  .card-list {
    background-color: #f7f8fa;
    margin-top: 10px;
    :deep(.arco-card-body) {
      padding: 0;
      .arco-list-header {
        padding: 8px 10px;
      }
      .arco-list-item {
        padding: 5px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .arco-list-item-main {
          width: 100px;
          .arco-list-item-content {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 20px;
          }
        }
      }
    }
  }

  .title-icon {
    display: inline-block;
    margin-left: -10px;
    width: 16px;
    height: 12px;
    background: linear-gradient(90deg, #d9d9d9 0%, rgba(217, 217, 217, 0) 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }
  .title-message {
    padding: 8px 10px;
  }
  .title-file {
    padding: 8px 10px;
    font-size: 16px;
  }
  .message-info {
    height: 120px;
    overflow: auto;
    padding: 5px 10px;
  }
  .overflow-e {
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
</style>
